<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>进度条</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../resource/css/layui.css">
	<link rel="stylesheet" href="../resource/css/common.css">
</head>
<body>
	<!-- class="canScroll" 必填 -->
	<table id="table1" class="canScroll" lay-filter="test"></table>
	<table id="table2" class="canScroll" lay-filter="test2"></table>

	<script type="text/html" id="barDemo">
	    <a class="layui-btn layui-btn-primary layui-btn-mini" lay-event="detail">查看</a>
	    <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
	    <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
	</script>
	<script src="../resource/js/layui.js"></script>
	<script type="text/javascript">
		layui.use(['table'], function(){
			var table 	= layui.table;
			var $ 		= layui.$ || parent.window.mod.jquery;

			table.render({
				elem: $('#table1'),				// 表格元素
				url	: '../resource/data/table.json',		// 请求路径
				page: true,						// 是否开启分页
				limit: 20,						// 默认一页显示个数
				limits: [10,20,30],				// 每页显示个数的可选值
				loading: true,					// 切换 是否 显示loading
				text: {none:'未查到相关数据'},	// 空数据提示
  				even: true,						// 开启隔行背景
  				method: 'get',					// 请求类型 默认get
  				where: {						// 请求的其他参数(除开page和limit)
  					// token: 'sasasas',
  					id: 10001
  				},
				cols: [[						// 表头
					{checkbox: true, fixed: true}
					,{field: 'id', title: 'ID', sort: true, fixed: 'left'}
				    ,{field: 'username', title: '用户名5'}
				    ,{field: 'sex', title: '性别5', sort: true}
				    ,{field: 'city', title: '城市5'} 
				    ,{field: 'sign', title: '签名5', align: 'center'}
				    ,{field: 'experience', title: '积分5', sort: true}
				    ,{field: 'score', title: '评分5', sort: true}
				    ,{field: 'classify', title: '职业5'}
				    ,{field: 'wealth', title: '财富5', sort: true, edit: 'text'}
				    ,{field: 'btn', title: '操作5',toolbar:"#barDemo"}
				]],
				done: function(res, curr, count){// 加载完table后执行的方法 res：返回数据 curr：当前页码 count：一页显示个数
					parent.window.resizeIframe(window.frameElement, document.getElementsByTagName('html')[0]);
					parent.window.tableHeaderFixed($, this.elem, 0, true);
				}
			});

			table.render({
				elem: $('#table2'),				// 表格元素
				url	: '../resource/data/table.json',		// 请求路径
				page: true,						// 是否开启分页
				limit: 20,						// 默认一页显示个数
				limits: [10,20,30],				// 每页显示个数的可选值
				loading: true,					// 切换 是否 显示loading
				text: {none:'未查到相关数据'},	// 空数据提示
  				even: true,						// 开启隔行背景
  				method: 'get',					// 请求类型 默认get
  				where: {						// 请求的其他参数(除开page和limit)
  					// token: 'sasasas',
  					id: 10001
  				},
				cols: [[						// 表头
					{checkbox: true, fixed: true}
					,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
				    ,{field: 'username', title: '用户名111', width:80}
				    ,{field: 'sex', title: '性别', width:80, sort: true}
				    ,{field: 'city', title: '城市', width:80} 
				    ,{field: 'sign', title: '签名', width: 177}
				    ,{field: 'experience', title: '积分', width: 80, sort: true}
				    ,{field: 'score', title: '评分', width: 80, sort: true}
				    ,{field: 'classify', title: '职业', width: 80}
				    ,{field: 'wealth', title: '财富', width: 135, sort: true}
				    ,{field: 'btn', title: '操作', width:300,toolbar:"#barDemo"}
				]],
				done: function(res, curr, count){// 加载完table后执行的方法 res：返回数据 curr：当前页码 count：一页显示个数
					parent.window.resizeIframe(window.frameElement,document.getElementsByTagName('html')[0]);
					parent.window.tableHeaderFixed($, this.elem, 1);
				}
			});

		});
	</script>
</body>
</html>